<template>
  <div class="title-border">
    <div class="title">
			<span class="title-padding">{{title}}</span>
		</div>
      <div class="title-layout">
        <slot></slot>
      </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@vue/runtime-core'

export default defineComponent({
props: {
  title: {
    type: String,
    required: true
  }
}
})
</script>

<style scoped lang="scss">
.title-layout {
	display: flex;
	flex-wrap: wrap;
	height: 100%;
}

.title-border {
	width: 100%;
	box-sizing: border-box;
	.title {
		border-bottom: 1px solid $mainColor;
		width: 100%;
		height: 40px;
		line-height: 40px;
		font-weight: 600;
		font-size: $fontSize-2;
		position: relative;
    margin-bottom: 12px;
	}

	.title::before {
		content: '';
		display: block;
		width: 2px;
		height: 100%;
		background: $mainColor;
		position: absolute;
		transform: scaleY(.3);
		
	}
	.title-padding {
		padding-left: 10px;
	}
}
</style>